import React from 'react';
import ReactDOM from 'react-dom';
import {
	createStore,
	applyMiddleware
} from 'redux';
import {
	Provider
} from 'react-redux';
import App from './components/App';
import rootReducer from './reducers/index';
import './index.css';

/**
 * 记录所有被发起的 action 以及产生的新的 state。
 */
const logger = store => next => action => {
	console.group(action.type)
	console.info('dispatching:', action)
	let result = next(action);
	console.log('next state: ', store.getState())
	console.groupEnd(action.type)

	console.log("%cresult:", 'color:blue', result)
	return result
}

/**
 * 在 state 更新完成和 listener 被通知之后发送崩溃报告。
 */
const crashReporter = store => next => action => {
	try {
		console.log('executing crashReporter middleware')
		return next(action)
	} catch (err) {
		console.error('Caught an exception!', err)
		throw err
	}
}

let middlewares = []
if (process.env.NODE_ENV === 'development') {
	middlewares = [...middlewares, logger, crashReporter]
} else if (process.env.NODE_ENV === 'production') {}

// 获取store
const store = createStore(rootReducer, applyMiddleware(...middlewares))

ReactDOM.render(
	<Provider store={store}>
  		<App />
  	</Provider>,
	document.getElementById('root')
);